import { Button } from 'antd';
import React, { Ref, useRef } from 'react';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { OneModal } from '@/components/one-ui';
import '../common/style.less';
import { NeedUpdateAPI } from '../common/type';

const UpdateRemoveMaterialModal: React.FC<NeedUpdateAPI.IUpdateRemoveMaterialModal> = ({ onSubmit, onClose, info }) => {
  const removeModalRef: Ref<IOneModalRef> = useRef(null);

  const { fullName } = info;
  /**
   * @onSave 保存事件
   */
  const onSave = async () => {
    await onSubmit();
    onCloseModalCommon(removeModalRef);
  };

  const footerRender = () => {
    return (
      <>
        <Button onClick={() => onCloseModalCommon(removeModalRef)}>取消</Button>
        <Button type={'primary'} onClick={onSave}>
          确认
        </Button>
      </>
    );
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={removeModalRef}
      title={'温馨提示'}
      className={'certificate-info-modal'}
      width={400}
      onCancel={onClose}
      footer={footerRender()}
      bodyStyle={{ padding: '5px 0px' }}
      centered
    >
      <div
        style={{
          textAlign: 'center',
          lineHeight: '50px',
          fontSize: '1rem',
          padding: '20px 45px',
        }}
      >
        是否删除【<span style={{ color: 'red' }}>{fullName}</span>】
        <br />
        此操作不可恢复！
      </div>
    </OneModal>
  );
};
export default UpdateRemoveMaterialModal;
